Using RapidSpell Web With 3rd Party Controls (Html Text Boxes)

Automatic Setup

3rd Party Controls can be used with RapidSpell Web, to use with a rich/html text box simply set TextComponentInterface="Automatic" and TextComponentID / TextComponentName to the ID of the control. The automatic interface should then pickup the editable elements and work with them. This has been tested with popular text boxes, however it may be possible that it fails to find the editable element (resulting in the spell checker not working at all) - in which case follow the next section.

Manual Setup

First set IgnoreXML to true (this will mean HTML tags are ignored), set TextComponentInterface to the name of your Control (if not available the CustomInterface method should be used) and set TextComponentName to the ID of the Control. For example if you use Dart's PowerWEB TextBox and your web form code is;

<form id="Form1" name="Form1".....>
    .........
    <cc1:HtmlBox id="HtmlBox1" runat="server"></cc1:HtmlBox>
    .........
    .........
</form>

then you should set TextComponentName to "HtmlBox1" (the ID of the Control) and TextComponentInterface should be set to "PowerWEBTextBox". If your Html text box control isn't available in TextComponentInterface then you should contact the vendor and ask about RapidSpell Web support - it is possible to build custom support yourself, fairly simply (see below).

Please note, if you are using .NET 1.1 or higher you will need to add validateRequest='false' to the page directive in the page holding the RapidSpellWeb control (the popup) and the RapidSpellWInlineHelper control (for inline). Failure to do this will result in errors when spell checking text containing HTML.

Additionally, if you are using .NET 4 or higher you will need to add <httpRuntime requestValidationMode="2.0" /> in web.config under <system.web>

Code Example Using Html Text Boxes

Page containing the RapidSpellWebLauncher control

.......................
<form action='exampleTextBox6-3rdParty.aspx' method='post' name='myForm'
id='myForm' runat='server'>
    <cc1:HtmlBox id="HtmlBox1" runat="server"></cc1:HtmlBox>
    <RapidSpellWeb:RapidSpellWebLauncher id="rapidSpellWebLauncher"
runat="server"
        TextComponentName="HtmlBox1"
        Mode="popup"
        TextComponentInterface="PowerWEBTextBox"
        IgnoreXML="true"
        RapidSpellWebPage="RapidSpellCheckerPopUp.aspx">
    </RapidSpellWeb:RapidSpellWebLauncher>
</form>
.......................

To use RapidSpell Web with indirectly supported 3rd party controls it is necessary to write a custom Javascript interface which will perform two tasks for RapidSpell Web, it must get the text from the control and set text to the control. To enable the use of a custom interface the TextComponentInterface property should be set to "Custom", and a Javascript (ECMAscript) block should be written into the form containing RapidSpell Web.

As an example, a custom interface for the standard HTML text area will be built, to demonstrate the concepts.

Firstly the RapidSpellWebLauncher control's TextComponentInterface is set to Custom:

<RapidSpellWeb:RapidSpellWebLauncher id="rapidSpellWebLauncher" runat="server"
            TextComponentName="tA"
            Mode="popup"
            TextComponentInterface="Custom"
            RapidSpellWebPage="RapidSpellCheckerPopUp.aspx">

Next an interface must be written in Javascript, RapidSpell will expect a type RSCustomInterface to be defined, of the following structure:

    function RSCustomInterface(tbElementName){
        this.tbName = tbElementName;
        this.getText = getText;
        this.setText = setText;
        function getText(){
            //return the text from the text component named
this.tbName,
            //this may be HTML formatted text
            return .........
        }
        function setText(text){
            //set the text in the text component to the text argument
            //this may be HTML formatted text
            ........
        }
    }

The two functions, getText and setText must be written to the specifications of the 3rd party component, note that if they will return XML(HTML) formatted text that the RapidSpellWebLauncher property IgnoreXML should be set to true, otherwise the XML tags will be spell checked. In this example the interface will be interfacing with a regular HTML <textarea> in which the text contained is accessed using the format
document.formName.textAreaName.value
    getText and setText can then be written as;
        function getText(){
            return eval('document.form1.'+this.tbName+'.value');
        }
        function setText(text){
            eval('document.form1.'+this.tbName+'.value = text') ;
        }

which dynamically accesses the text box named in the this.tbName variable. When RapidSpell runs it instantiates an object of type RSCustomInterface using the Javascript line
var interfaceObjectName = new RSCustomInterface(_textComponentName);
where _textComponentName is specified by the property TextComponentName in RapidSpellWebLauncher.

For Html text boxes the Javascript text access method (how you get the innerHTML out of the text box) is dependant on the vendor, however it is usually easy to identify - Html text boxes tend to work by setting the 'design mode' to true on either, Iframe body tags, div tags or span tags. To identify your vendors method, run a 'view-source' in the browser, and look for an Iframe, div or span, and see if design mode is set on for the element. For Html text boxes the inner Html (which is what is required by getText and setText), is accessed through the innerHTML property, eg; document.all['mySpanTag'].innerHTML.

The full code, for a simple text box custom interface is;

<%@ Page Language="C#" Debug="true"%>
<%@ Register TagPrefix="RapidSpellWeb" Namespace="Keyoti.RapidSpell"
Assembly="Keyoti.RapidSpellWeb" %>
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
    <HEAD>
        <script>
            function RSCustomInterface(tbElementName){
                this.tbName = tbElementName;
                this.getText = getText;
                this.setText = setText;
                function getText(){
                    return eval('document.myForm.'+this.tbName+'.value');
                }
                function setText(text){
                    eval('document.myForm.'+this.tbName+'.value = text') ;
                }
            }
        </script>
    </HEAD>
<BODY>
    <form runat=server>
        <textarea ID='tA'></textarea>
        <br>
        <RapidSpellWeb:RapidSpellWebLauncher id="rapidSpellWebLauncher"
runat="server"
                TextComponentName="tA"
                Mode="popup"
                TextComponentInterface="Custom"
                IgnoreXML="true"
                RapidSpellWebPage="RapidSpellCheckerPopUp.aspx">
        </RapidSpellWeb:RapidSpellWebLauncher>
    </form>
</BODY>
</HTML>